<script setup>
import { useRouter } from "vue-router";
import { userStore} from "@/store/index.js";
import {onMounted} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
// pinia 存储对象
const userItemStore = userStore();


const router = useRouter();

const toLogin = () => {
  router.push('/login');
};

const toRegist = () => {
  router.push('/register');
};

const toCart = () => {
  router.push('/cart');
};

// 判断用户是否登录（axios拦截器中会在发送请求之前，自动去localStorage中获取token并在请求头中携带token）
const isLogged = () => {
  axios.get('/user/isLogged').then(res=>{
     const user = res.data;
     // 解决登录后，刷新用户登录状态丢失的问题！
     userItemStore.updateUser(user)
     userItemStore.updateLoginStatus(true)
  }).catch(error=>{
    console.log('用户未登录:' + error)
  })
}

// 退出
const logout = () => {
  axios.delete('/user/logout').then(res=>{

    ElMessage.success('退出成功！');

    // 1. 删除用户信息
    localStorage.removeItem('user');
    // 2. 删除token
    localStorage.removeItem('token');

    // 3、更新pinia中用户登录状态、登录后的用户信息
    userItemStore.updateLoginStatus(false)
    userItemStore.updateUser({})

    // 4. 跳转到登录页面
    router.push('/');
  })
}

onMounted(()=>{
  isLogged()
})

const toFirst = () => {
  router.push('/');
};
const toOrder = () => {
  router.push('/order');
};

</script>

<template>

  <div>

    <el-row class="banner">
      <el-col :span="7">
        <img src="../assets/logo.png" title="二手书城">
      </el-col>
      <el-col :span="7">
        <el-input style="width: 240px" placeholder="搜索关键字" />
        <el-button type="primary"><el-icon><Search /></el-icon>搜索</el-button>

      </el-col>

      <el-col :span="10" style="text-align: right">
        <!--  后面的按钮 -->
        <el-button-group>
          <el-button type="primary" size="small" icon="el-icon-camera-solid" @click="toFirst">首页</el-button>
          <!-- 1、登录  -->
          <template v-if="userItemStore.loggedIn">
            <el-button type="plain" size="small"><el-icon><ShoppingCart /></el-icon>欢迎您：{{ userItemStore.user.account }}</el-button>
            <el-button type="primary" size="small" @click="toCart"><el-icon><ShoppingCartFull /></el-icon>购物车</el-button>
            <el-button type="primary" size="small"><el-icon><Collection /></el-icon>我的收藏</el-button>
            <el-button type="primary" size="small" @click="toOrder"><el-icon><ChatDotRound /></el-icon>我的订单</el-button>
            <el-button type="primary" size="small" icon="el-icon-bicycle" @click="logout">退出</el-button>
          </template>
          <!-- 2未登录  -->
          <template v-else>
            <el-button type="primary" size="small" icon="el-icon-camera-solid" @click="toLogin">登录</el-button>
            <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="toRegist">注册</el-button>
          </template>




        </el-button-group>
      </el-col>

    </el-row>


  </div>

</template>


<style scoped>
.banner {
  display: flex;
  justify-content: center;
  /* 底部对齐 */
  align-items: flex-end;
  padding: 5px;
  top: 0;
  left: 0;
  width: 100%;
  /* 左上角到右下角 */
  background: linear-gradient(to bottom right, #a9dff4, #688df4, #eef2ce);
}
</style>
